<template>
	<div>input自定义样式实现图片上传</div>
	<div>通过input的file类型，实现图片上传，通过设置input的透明度为0实现隐藏input原始样式</div>
	<div class="upf">
		<input ref="inputType" class="input-file" type="file" accept="image/*" multiple @change="setImage" />
			<img class="img-fp" :src="imgSrc">
	</div>

</template>

<script>
	import {
		ref,
		reactive
	} from 'vue'
	export default {
		setup: () => {
			var inputType = ref(null)
			return {
				inputType
			}
		},
		data() {
			return {
				imgSrc: ''
			}
		},
		mounted() {

		},
		methods: {
			setImage(e) {
				console.log('e', e)
				var file = e.target.files[0];
				if (!file.type.includes('image/')) {
					console.log('请选择 jpg、jpeg、png、gif 格式图片')
					return
				}
				console.log('file', file)
				console.log('this.inputType', this.inputType)
				console.log('this.inputType.files', this.inputType.files)
				console.log('this.inputType.files==e.target.files', this.inputType.files == e.target.files) //true
				console.log(typeof FileReader === "function")
				if (typeof FileReader === "function") {
					const reader = new FileReader();
					console.log('reader', reader)
					reader.onload = (event) => {
						console.log('event', event)
						this.imgSrc = event.target.result;
					}
					reader.readAsDataURL(file);
				}
			},


		},
	}
</script>

<style scoped="scoped">
	.upf {
		margin-left: 15px;
		width: 62px;
		height: 62px;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px dashed rgba(179, 179, 179, 1);
		border-radius: 3px;
	}

	input {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0px;
		top: 0px;
		opacity: 0;
		z-index: 1;
	}

	.img-fp {
		position: absolute;
		margin-left: 100px;
		width: 62px;
		height: 62px;
		background-size: contain
	}
</style>
